<template>
  <iBizControlBase :controller="c" :class="[ns.m(c.state.viewMode.toLowerCase()), ns.b(position)]">
    <!-- 绘制最前方的额外按钮 -->
    <template v-if="c.state.extraButtons.before?.length > 0">
      <view
        v-for="button in c.state.extraButtons.before"
        :key="button.id"
        :class="[ns.e('item'), ns.e('item-extra'), ns.e(`item-${position}`)]"
      >
        <button :title="button.tooltip" :size="btnSize" @click="(e) => handleClick(button, e)">
          <iBizIcon v-if="button.sysImage" :icon="button.sysImage" />
          {{ btnCaption(button, c.state.viewMode) }}
        </button>
      </view>
    </template>
    <!-- 绘制指定位置后的额外按钮 -->
    <template v-for="(item, index) in modelData.detoolbarItems" :key="item.id">
      <template v-if="c.state.extraButtons[index]?.length">
        <!-- 绘制工具栏项 -->
        <view v-if="item.itemType === 'ITEMS'">TODO暂未支持弹框绘制</view>
        <view
          v-if="item.itemType === 'DEUIACTION' && c.state.buttonsState[item.id]?.visible"
          :key="item.id"
          :class="[ns.e('item'), ns.e('item-deuiaction'), ns.e(`item-${position}`)]"
        >
          <button
            :title="item.tooltip"
            :size="btnSize"
            :type="btnType(item)"
            :loading="c.state.buttonsState[item.id].loading"
            :disabled="c.state.buttonsState[item.id].disabled"
            @click="(e) => handleClick(item, e)"
          >
            <iBizIcon v-if="item.sysImage" :icon="item.sysImage" />
            {{ btnCaption(item, c.state.viewMode) }}
          </button>
        </view>
        <!-- 绘制额外按钮 -->
        <view
          v-for="button in c.state.extraButtons[index]"
          :key="button.id"
          :class="[ns.e('item'), ns.e('item-extra'), ns.e(`item-${position}`)]"
        >
          <button :title="button.tooltip" :size="btnSize" @click="(e) => handleClick(button, e)">
            <iBizIcon v-if="button.sysImage" :icon="button.sysImage" />
            {{ btnCaption(button, c.state.viewMode) }}
          </button>
        </view>
      </template>
    </template>
    <!-- 绘制最后方的额外按钮 -->
    <template v-if="c.state.extraButtons.after?.length > 0">
      <view
        v-for="button in c.state.extraButtons.before"
        :key="button.id"
        :class="[ns.e('item'), ns.e('item-extra'), ns.e(`item-${position}`)]"
      >
        <button
          :title="button.tooltip"
          :size="btnSize"
          @click="(e) => handleClick(button, e)"
        ></button>
      </view>
    </template>
  </iBizControlBase>
</template>
<script setup lang="ts">
import { computed, PropType, VNode } from 'vue'
import {
  IDETBGroupItem,
  IDETBUIActionItem,
  IDEToolbar,
  IDEToolbarItem,
  IViewLayoutPanel,
} from '@ibiz/model-core'
import {
  IController,
  IControlProvider,
  IExtraButton,
  ToolbarController,
} from '@ibiz-template/runtime'
import { useControlController, useNamespace } from '@/use'

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IDEToolbar>,
    required: true,
  },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
})

const c = useControlController((...args) => new ToolbarController(...args))
const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`)

// 点击事件
const handleClick = async (item: IDEToolbarItem | IExtraButton, event: MouseEvent) => {
  await c.onItemClick(item, event)
}

let position = ''

switch (props.modelData.toolbarStyle) {
  case 'MOBNAVRIGHTMENU':
    position = 'right'
    break
  case 'MOBNAVLEFTMENU':
    position = 'left'
    break
  case 'MOBBOTTOMMENU':
    position = 'bottom'
    break
  default:
    break
}

const btnSize = computed(() => {
  return position === 'bottom' ? 'normal' : 'small'
})

const btnType = (item: IDEToolbarItem) => {
  return (item as IDETBUIActionItem).actionLevel! > 100 ? 'primary ' : 'default'
}

const btnCaption = (item: IDEToolbarItem | IExtraButton, viewMode: string) => {
  if (viewMode === 'EMBED') {
    return item.caption
  }
  return (item as IDEToolbarItem).showCaption || (item as IExtraButton).buttonType === 'extra'
    ? item.caption
    : ''
}
</script>
<style lang="scss">
@import './i-biz-toolbar-control';
</style>
